/**
 * key-search部分.
 */
Vue.component("key-search", {
    template :
        `
        <Row>
            <i-col span="18">
                <i-input v-model="keySearchValue" placeholder="请输入KEY..." @on-enter="queryKeys" @on-change="restoreKeys"></i-input>
            </i-col>
            <i-col span="2" style="padding: 4px;">
                <Button type="ghost" shape="circle" icon="ios-search" v-on:click="queryKeys" size="small"></Button>
            </i-col>
            <i-col span="2" style="padding: 4px;">
                <Button type="ghost" shape="circle" icon="ios-close-empty" v-on:click="clearSearchValue" size="small"></Button>
            </i-col>
            <i-col span="2" style="padding: 4px;">
                <Button type="ghost" shape="circle" icon="ios-plus-empty" v-on:click="addKey" size="small"></Button>
            </i-col>
        </Row>
        `,
    props : ["keySearchValue"],
    methods : {
        queryKeys : function () {
            this.$emit("queryKeys", this.keySearchValue.replace(/(^\s*)|(\s*$)/g, ""));
        },
        restoreKeys : function () {
            if(this.keySearchValue == ""){
                this.$emit("restoreKeys");
            }
        },
        clearSearchValue: function () {
            this.keySearchValue = "";
            this.restoreKeys();
        },
        addKey: function () {
            this.$emit("addKey");
        }
    }
});